<!--
 * @Author: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @Date: 2024-08-15 09:39:28
 * @LastEditors: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @LastEditTime: 2024-08-15 09:51:38
 * @FilePath: \echarts\src\components\tableName.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->


<script setup>
import { ref,onMounted } from 'vue'
import { showTableNamesService } from '@/api/tableNameShow';

const table = ref({
    tableName:'t_emp',
    tableType:0
})

const datasets = ref([])
const expanded = ref(Array(datasets.value.length).fill(false))


const toggleDataset = (index) => {
  expanded.value[index] = !expanded.value[index]
}

const showTableName = async()=>{
  let result = await showTableNamesService()
    console.log(result.data)
    datasets.value = result.data

    
}

// const showTableInfo = async()=>{
//     let result = await showTableService(table.value)
//     console.log(result)
//     tableData.value = result.data;
//     headers.value = Object.keys(result.data[0])
// }



onMounted(() => {
  showTableName();
});
</script>




<template>
    <div class="left-list">
      <ul>
        <!-- 遍历数据集 -->
        <li v-for="(dataset, dIndex) in datasets" :key="dIndex"  class="dataset-item"  @click="toggleDataset(dIndex)">
          {{ dataset.datasetName }}
          <!-- 遍历数据集中的表 -->
          <ul  v-show="expanded[dIndex]" class="table-list">
            <li v-for="(name, tIndex) in dataset.tableNames" :key="tIndex"
              @click.stop="table.tableName = name; ">
              {{ name }}
            </li>
          </ul>
        </li>
      </ul> 
    </div>
</template>